@use "sass:color";

/*
 * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
 * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 */

/*
 * HOW TO USE THIS FILE
 * Use this file to override Bootstrap variables and WET custom variables.
 * If there is a Bootstrap variable not shown here that you want to override, go to "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables" to view the variables that you can override. Simply copy and paste the variable and its applicable section (if applicable) from the Bootstrap file into this override file and override the variables as applicable.
 */

$wb-core-path: "../../wet-boew" !default;
$wb-assets-path: "#{$wb-core-path}/assets" !default;
$icon-font-path: "#{$wb-core-path}/fonts/";

//
// BOOTSTRAP VARIABLES
//

// == Colours
//
// ## Gray and brand colors for use across the application.

// Bootstrap Overrides
$gray-light: #767676 !default;
$brand-primary: #2572b4 !default;
$brand-success: #1b6c1c !default;
$brand-info: #4d4d4d !default;
$brand-warning: #f2d40d !default;
$brand-danger: #bc3331 !default;
$panel-inner-border: #8e8e8e !default;
$panel-default-border: $panel-inner-border !default;
$panel-success-border: #629339 !default;
$panel-info-border: #2392A9 !default;
$panel-warning-border: #BA8312 !default;
$panel-danger-border: #C16171 !default;

// WET Custom
$clrWhite: #fff !default;
$clrLight: #eee !default;
$clrMedium: #ccc !default;
$clrDark: #555 !default;
$clrDarkBlue: #243850 !default;


// == Scaffolding
//
// ## Settings for some of the most global styles.

// ** Global textual link color.
// Bootstrap Overrides
$link-color: #295376 !default;
$link-hover-color: #0535d2 !default;

// WET Custom
$content-bg: null !default;
$main-bg: null !default;
$link-visited-color: #7834bc !default;


// == Typography
//
// ## Font, line-height, and color for body text, headings, and more.

// WET Custom font scales
$font-scale-xxxl: 2.125 !default;
$font-scale-xxl: 1.625 !default;
$font-scale-xl: 1.375 !default;
$font-scale-lg: 1.125 !default;
$font-scale-sm: .875 !default;

// Bootstrap Overrides
$font-size-base: 16px !default;
$font-size-large: ceil($font-size-base * $font-scale-lg) !default;
$font-size-small: ceil($font-size-base * $font-scale-sm) !default;
$font-size-h1: ceil($font-size-base * $font-scale-xxxl) !default;
$font-size-h2: ceil($font-size-base * $font-scale-xxl) !default;
$font-size-h3: ceil($font-size-base * $font-scale-xl) !default;
$font-size-h4: ceil($font-size-base * $font-scale-lg) !default;
$font-size-h6: ceil($font-size-base * $font-scale-sm) !default;

// ** Unit-less `line-height` for use in components like buttons.
// 20/14 -> 23/16 on the basis of ceil((20/14)*16) = 23
$line-height-base: 1.4375 !default;


// == Breadcrumb
//
// ## Breadcrumb enable/disable and colour settings.

// WET Custom
$wb-bc-enable: true !default; // Enable or disable WET's breadcrumb SCSS. Themes that don't use breadcrumbs can set this to false.
$wb-bc-background-color: null !default; // Outer background colour. Override $breadcrumb-bg (Bootstrap variable) to change the inner background colour.
$wb-bc-separator-color: #333 !default; // Separator colour.
$wb-bc-separator-font-family: "Glyphicons Halflings" !default; // Separator font family.
$wb-bc-separator-font-size: .7em !default; // Separator font size.
$wb-bc-separator-content: "\e092" !default; // Separator content.
$wb-bc-separator-content-rtl: "\e091" !default; // Separator content (right to left).
$wb-bc-print-show: true !default; // Show or hide breadcrumb in print view.


// == Sign in / off
//
// ##
$wb-so-background-color: null !default;
$wb-so-text-align: right !default;
$wb-so-padding: 1em 0 0 !default;


// == Forms
//
// WET Custom
$wb-forms-asterisk-width: .67em !default; // Asterisk offset for required field labels.


// == Tables
//
// ## Customizes the `.table` component with basic values, each used across all table variations.

// Bootstrap Overrides
// ** Background color used for `.table-striped`.
$table-bg-accent: #f5f5f5 !default;

// ** Background color used for `.table-hover`.
$table-bg-hover: #f0f0f0 !default;


// == Buttons
//
// ## For each of buttons, define text, background and border color.

// Bootstrap Overrides
$btn-default-color: #335075 !default;
$btn-default-bg: #eaebed !default;
$btn-default-border: color.adjust($btn-default-bg, $lightness: -5%, $space: hsl) !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: color.adjust($btn-primary-bg, $lightness: -20%, $space: hsl) !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: color.adjust($btn-success-bg, $lightness: -20%, $space: hsl) !default;
$btn-info-bg: $brand-info !default;
$btn-info-border: color.adjust($btn-info-bg, $lightness: -20%, $space: hsl) !default;
$btn-warning-color: #000 !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border: color.adjust($btn-warning-bg, $lightness: -20%, $space: hsl) !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: color.adjust($btn-danger-bg, $lightness: -20%, $space: hsl) !default;


// == Media queries breakpoints
//
// ## These additional are additional breakpoints outside of and in addition to Bootstrap's definitions at which your layout will change, adapting to different screen sizes.

// WET Custom
// Extra extra small screen
$screen-xxs-max: 479px !default;

// Large screen
$screen-lg-max: 1599px !default;

// Extra large screen
$screen-xl-min: 1600px !default;


// == Pagination
//
// ##

// Bootstrap Overrides
$pagination-color: $btn-default-color !default;
$pagination-bg: $btn-default-bg !default;
$pagination-border: $btn-default-border !default;
$pagination-hover-color: $btn-default-color !default;
$pagination-hover-bg: color.adjust($btn-default-bg, $lightness: -8%, $space: hsl) !default;
$pagination-hover-border: color.adjust($btn-default-border, $lightness: -12%, $space: hsl) !default;

// WET Custom
$pager-border-radius: 4px !default;

// == Expand/collapse (Details/summary)
//
// ##
$details-indentation: 1.1em !default;


//
// WET CUSTOM PLUGINS VARIABLES
//

// == Calendar
//
// ##
$cal-header-bg-color: #333 !default;
$cal-mnth-arrows-color: $clrWhite !default;
$cal-mnth-arrows-disabled-color: $clrMedium !default;
$cal-dow-bg: $clrDark !default;
$cal-dow-color: $clrWhite !default;
$cal-dow-border: 1px solid #333 !default;
$cal-day-bg: $clrWhite !default;
$cal-day-color: #000 !default;
$cal-day-hover-bg: #333 !default;
$cal-day-hover-color: $clrWhite !default;
$cal-curr-day-bg: $clrMedium !default;
$cal-curr-day-color: $cal-day-color !default;


// == Footnotes
//
// ##

$spacing: .375em !default;
$ddRtnWidth: 3.5em !default;


// == Multimedia player
//
// ##

$mm-progress-fg-color: #176ca7 !default;
$mm-progress-bg-color: #fff !default;
$mm-cc-fg-color: #fff !default;
$mm-cc-bg-color: #000 !default;
$mm-cc-lines: 2 !default;
$mm-cc-padding: .5em !default;
$mm-ctrl-fg-color: #fff !default;
$mm-ctrl-bg-color: #3e3e3e !default;
$mm-ctrl-outline-color: #4aafff !default;
$mm-ctrl-cc-color: #4aafff !default;
$mm-volume-bg-color: #aaa !default;
$mm-volume-thumb-border: 1px solid #707070 !default;
$mm-volume-thumb-color: #fff !default;
$mm-volume-thumb-height: 1.3em !default;
$mm-volume-thumb-width: 10px !default;


// == Tabs
//
// ##

// Tabbed Interface
$tablist-color: #000 !default;
$tablist-border-color: $clrMedium !default;
$tablist-border-style: solid !default;
$tablist-border-width: 1px !default;
$tabpanel-border-color: $tablist-border-color !default;
$tabpanel-border-style: solid !default;
$tabpanel-border-width: 1px !default;
$tablist-bg-color: #ebf2fc !default;
$tablist-hover-bg-color: $clrMedium !default;
$tablist-active-bg-color: null !default;
$tablist-active-link-border-color: #666 !default;
$tablist-active-link-border-style: solid !default;
$tablist-active-link-border-width: 4px 0 0 0 !default;

// Tablist in small and extra small view
$tablist-screen-sm-border-color: $tablist-border-color !default;
$tablist-screen-sm-border-style: solid !default;
$tablist-screen-sm-border-width: 1px !default;
$tablist-screen-sm-border-radius: 4px !default;
$tablist-screen-sm-separator-border-color: $tablist-screen-sm-border-color !default;
$tablist-screen-sm-separator-border-style: $tablist-screen-sm-border-style !default;
$tablist-screen-sm-separator-border-width: $tablist-screen-sm-border-width !default;

// Carousel
$carousel-tablist-tabcount-color: #000 !default;
$carousel-tabpanel-figcaption-color: #fff !default;
$carousel-tabpanel-link-color: $carousel-tabpanel-figcaption-color !default;
$carousel-tabpanel-figcaption-bg-color: $clrDarkBlue !default;
$carousel-tabpanel-outline-color-inner: #fff !default;
$carousel-tabpanel-outline-offset: 2px !default;

// Carousel Style 2 with Thumbnails
$carousel-s2-tablist-controls-bg-color: $clrLight !default;
$carousel-s2-tablist-controls-color: $clrDarkBlue !default;
$carousel-s2-tablist-controls-btn-bg-color: #fff !default;
$carousel-s2-tablist-controls-btn-shadow: 0 0 4px $clrDarkBlue !default;
$carousel-s2-tablist-controls-btn-radius: 999px !default;
$carousel-s2-tablist-thumbnail-active-border-color: #666 !default;
$carousel-s2-tablist-thumbnail-active-border-style: solid !default;
$carousel-s2-tablist-thumbnail-active-border-width: 10px !default;


// == Text Highlight
//
// ##

$txthl-bg-color: #ff0 !default;
$txthl-color: #000 !default;
$txthl-font-weight: 700 !default;


// == Twitter embedded timeline
//
// ##

$twitter-iframe-border-color: #CFD9DE !default;
$twitter-iframe-border-radius: 12px !default;
$twitter-end-background-color: #FFF !default;
$twitter-end-color: #000 !default;
$twitter-skip-background-color: #000 !default;
$twitter-skip-color: #FFF !default;


// == Overlay
//
// ##
$overlay-background-color: #fff !default;
$overlay-header-background-color: #2e5274 !default;
$overlay-header-color: #fff !default;
$overlay-bar-background-color: #000 !default;


//
// WET CUSTOM THEME VARIABLES
//

// == Mobile menu
//
// ##
$mb-pnl-background: #193451 !default;
$mb-pnl-header-background: $overlay-header-background-color !default;
$mb-pnl-header-color: $overlay-header-color !default;
$mb-pnl-body-background: #0e4164 !default;
$mb-pnl-body-color: #fff !default;
$mb-pnl-body-link-color: #fff !default;
